<template>
  <div class="box-main1">
    <div class="box-header2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/index' }">控制台</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box-main2">
      <div class="box-search2">

        <div class="box-input2" style="width: 180px">
          <el-input  @keydown.enter.native="clkBtnSearch" @clear="clkBtnSearch" clearable
                     size="mini" v-model="searchInfo.searchKey" placeholder="账号/姓名"></el-input>
        </div>
        <div class="box-input2">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="clkBtnSearch">搜索</el-button>
          <el-button size="mini" type="warning" icon="el-icon-plus" @click="clkBtnAddUser">新增</el-button>
        </div>

      </div>

      <div class="box-content2">
        <div class="box-table2">
          <el-table class="tbl1" :data="userInfoList" :stripe="true" size="small">

            <el-table-column type="index" :index="1" label="序号" width="55"></el-table-column>
            <el-table-column label="登录账号" width="100">
              <template slot-scope="scope">
                <span >{{scope.row.usercode}}</span>
              </template>
            </el-table-column>
            <el-table-column label="真实姓名" width="120">
              <template slot-scope="scope">
                <span>{{scope.row.realname}}</span>
              </template>
            </el-table-column>
            <el-table-column label="拥有权限" width="120">
              <template slot-scope="scope">
                <span>{{scope.row.permissions}}</span>
              </template>
            </el-table-column>
            <el-table-column label="注册时间" width="160">
              <template slot-scope="scope">
                  <span>{{scope.row.create_time }}</span>
              </template>
            </el-table-column>



            <el-table-column  label="操作" width="100">
              <template slot-scope="scope">
                 <span>
                    <el-button type="success" size="mini" @click="clkBtnModifiy(scope.row)">编辑</el-button>
                 </span>
                 <span>
                   <el-button type="danger" size="mini" @click="clkDelete(scope.row)">删除</el-button>
                 </span>
              </template>
            </el-table-column>

          </el-table>
        </div>


        <div class="box-page2">
          <!--                         layout表示需要的显示的内容,用逗号分割,布局元素会依次显示
                             prev表示上一页
                             next为下一页
                             pager表示分页码列表
                表格的分页     total:表示页码数                  -->
          <el-pagination layout="prev, pager, next" :total="pageInfo.total"
                         :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
                         @current-change="chgCurrPage">
          </el-pagination>
        </div>
      </div>
    </div>


    <el-dialog title="编辑用户信息" class="dialog2" :show-close="false" :visible.sync="showModifiyUser">
      <div class="box-content4">
        <el-form size="mini" label-width="200px" label-position="left">
          <el-form-item label="请输入新的姓名：">
            <el-input v-model="userInfo.realname"></el-input>
          </el-form-item>
          <el-form-item label="请输入新的用户密码：">
            <el-input v-model="userInfo.userpwd"></el-input>
          </el-form-item>
          <el-form-item label="请选择新的用户权限：">
            <el-checkbox-group v-model="userInfo.permissions">
              <el-checkbox label="system_manage"></el-checkbox>
              <el-checkbox label="class_manage"></el-checkbox>
              <el-checkbox label="group_manage"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer2">
        <el-button size="mini" type="primary" @click="clkBtnModifiyRight">确定</el-button>
        <el-button size="mini" type="warning" @click="showModifiyUser = false">取消</el-button>
      </div>
    </el-dialog>





    <el-dialog title="新增用户信息" class="dialog1"
               :show-close="false" :close-on-click-modal="false" :visible.sync="showAddUserDialog">
      <div>
        <div class="box-content2">


          <div class="box-table2">
            <el-form size="mini" ref="userInfo" :model="userInfo" label-width="120px">
              <el-form-item label="登录账号">
                <el-input v-model="userInfo.usercode"></el-input>
              </el-form-item>
              <el-form-item label="真实姓名">
                <el-input v-model="userInfo.realname"></el-input>
              </el-form-item>
              <el-form-item label="登录密码">
                <el-input type="password" v-model="userInfo.userpwd"></el-input>
              </el-form-item>
              <el-form-item label="密码二次验证">
                <el-input type="password" v-model="userInfo.userpwd2"></el-input>
              </el-form-item>
              <!-- 伪代码： 增加选择权限的 el-checkbox-group  -->
              <el-form-item label="用户权限">
                <el-checkbox-group v-model="userInfo.permissions">
                  <el-checkbox v-for="(perm, index2) in allPermissions" :key="perm.noid"
                               :label="perm">{{perm}}</el-checkbox>
                </el-checkbox-group>

              </el-form-item>
            </el-form>
          </div>



        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="clkBtnSaveUser">确 定</el-button>
        <el-button size="mini" @click="showAddUserDialog = false">取 消</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import request from '@/common/utils/request';

  export default {
    computed:{
      loginUserInfo(){
        return this.$store.state.loginUserInfo;
      },

    },
    data() {
      return {
        searchInfo:{searchKey: null },
        userInfoList: [],

        pageInfo: {pageNum:1 ,pageSize:12 },
        pageLoading : false,

        showAddUserDialog: false,
        showModifiyUser: false,

        userInfo: {},
        allPermissions: []
      };
    },
    mounted() {
      this._initData();
    },
    watch: {
      $route: {
        handler: function (to, from) {
          if (to.path == '/admin/user_info_list') {
            this.getPage();
          }

        }, immediate: true
      },
    },
    methods: {
      _initData(){
        this.getPage();
        this.loadAllPermissions();
      },

      clkBtnSearch(){
        this.getPage();
      },
      clkBtnModifiy(row){
        this.userInfo = row;
        this.showModifiyUser = true;
      },
      clkBtnModifiyRight(){
        if (!this.userInfo.realname) {
          this.$message("要修改的姓名不能为空");
          return;
        }

        // if (!this.userInfo.userpwd) {
        //   this.$message("要修改的密码不能为空");
        //   return;
        // }

        let url1 = this.settings.apiUrl + "/user_info/update";
        let d1 = this.userInfo;
        request.post( url1,  d1 ).then((d1r) => {
          if (d1r.code === 0) {
            // 记录密码
            this.getPage();
            this.showModifiyUser = false;
            this.$message("信息修改成功~");
          }else{
            this.$alert('编辑用户信息失败：'+d1r.msg, '提示', {
              type: 'warning'
            });
          }
        })

      },
      clkDelete(row){
        this.$confirm("您确定删除这条记录吗","提示").then(() => {
          let url1 = this.settings.apiUrl + "/user_info/delete";
          let d1 = {noid: row.noid};
          request.post(url1, d1).then((d1r) => {
            if (d1r.code == 0) {
              this.getPage();
              this.$message("您删除成功了");
            } else {
              this.$message("删除失败" + d1r.msg + "，提示", {
                type: 'warning'
              });
            }
          })
        })
      },
      getPage(){
        let url1 = this.settings.apiUrl + '/user_info/page';
        let d1 = {pageNum: this.pageInfo.pageNum, pageSize:this.pageInfo.pageSize };
        d1.searchKey = this.searchInfo.searchKey;

        request.post(url1 , d1 ).then((d1r) => {
            this.pageLoading = false;
            if (d1r.code === 0) {
              this.userInfoList = d1r.data.list;
              this.pageInfo.total = d1r.data.total;

            }else{

              this.$alert('获取用户信息失败：'+d1r.msg, '提示', {
                type: 'warning'

              });

            }
          }).catch(err => {
          _this.pageLoading = false;
        });
      },
      chgCurrPage(val){
        this.pageInfo.pageNum = val;
        this.getPage();
      },
      // 点击新增用户的按钮
      clkBtnAddUser(){
        this.userInfo = {'permissions': []};
        this.showAddUserDialog = true;
      },

      loadAllPermissions () {
        let url1 = this.settings.apiUrl + "/permission/list_all_permission";
        let d1 ={};
        request.post(url1, d1).then(d1r => {
          if (d1r.code == 0) {
            this.allPermissions = d1r.data;
          }

        })
      },
      //// 改为 clkBtnAddUser
      clkBtnSaveUser(){

        // 1 首先做验证
        if( !this.userInfo.usercode ){
          this.$message.warning("登录账号必须填写");
          return;
        }

        // 正则表达式测试，登录账号只能是字符和数字，且长度大于等于4
        let regUsercode = /^[a-zA-Z0-9]{4,}$/i;
        if( !regUsercode.test( this.userInfo.usercode ) ){
          this.$message.warning("登录账号长度必须大于3,且只能包括a-zA-Z0-9");
          return;
        }

        if( !this.userInfo.userpwd ){
          this.$message.warning("登录密码必须填写");
          return;
        }
        if( this.userInfo.userpwd.length<=3 ){
          this.$message.warning("登录密码长度必须大于3");
          return;
        }

        let url1 = this.settings.apiUrl + '/user_info/add';
        let d1 = this.userInfo;

        // 补充 d1 中增加选中的权限
        request.post( url1,  d1 ).then((d1r) => {
        if (d1r.code === 0) {
          // 记录密码
          this.getPage();
          this.showAddUserDialog = false;
        }else{
          this.$alert('新增用户失败：'+d1r.msg, '提示', {
            type: 'warning'
          });
        }
      }).catch(err => {
          this.loading = false;
          console.log(err);
        });


      }

    }

  };
</script>

<style lang="scss" scoped="scoped">

  .box-main2 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .box-header2{
    height: 30px;
    background-color: #eceeef;
    padding-left:20px;
    padding-top:8px;

  }

  .box-search2{
    display: flex;
  }
  .box-page2{
    display: flex;
    justify-content: flex-end;
  }

  .box-search2{
    padding-bottom: 10px;
    .box-input2{
      padding-right:10px;
    }
  }



</style>
